//document.addEventListener("DOMContentLoaded", function() {
//
//    var menu = document.getElementById("header-menu");
//    var liElements = menu.getElementsByTagName("li");
//
//  Array.forEach(liElements, function(element, index, array) {
//      element.addEventListener("mouseover", function(elmli) {
//         elmli.target.style.height = "20px";
//      });
//  });
//});

//var ulElements = menu.getElementsByTagName("ul");
 //ulElements.className += "myClass";


 document.addEventListener("DOMContentLoaded", function() {

 var menu = document.getElementById("header-menu");
 var liElements = menu.getElementsByTagName("li");

    Array.forEach(liElements, function(element){
        element.addEventListener("mouseover", function(e) {
            e.target.className = "active";
        });
    });
});


1. у нас есть метод addEventListener который принадлежит document;

document.addEventListener("DOMContentLoaded", function() {

var menu = document.getElementById("header-menu");
var liElements = menu.getElementsByTagName("li");...

2. addEventListener - метод и функция которая принимает 2 параметра;

3. 1-й параметр - DOMContentLoaded - ето ивент на который повешен addEventListener;

4. 2-й параметр - function() - ето callback-функция;


5. addEventListener повешен на ивент DOMContentLoaded и согластно ему ждет загружения DOM;

6. после того как DOM загрузился выполняеться callback-функция;

7. выполнение callback-функции:

8. создаем переменную menu;

9. доступаемся к header-menu с помощью метода и в тоже время функции в document, а именно getElementById;

10. создаем вторую переменную liElements;

11. доступаемся ко всем li которые есть в header-menu с помощью метода и в тоже время функции в menu, а именно getElementsByTagName;

12. в итоге имеем все обьекты li;

13. в css мы определяем стиль для класса active которого нет в html:

    #header-menu .active {
    height: 20px;
}

14. что бы использовать метод forEach нам нужен Array так как li-шки не являються Array-м -(делаем подставную утку);

15. forEach - метод Array и в тоже время функция;

16. forEach как функция принимает 2 параметра;

17. 1-й параметр - liElements - li (при каждой итерации в liElements передаеться следующая li начиная с первой);

18. 2-й параметр - callback-функция (выполняеться при каждой итерации с каждой следующей li);


19. итак, при каждой итерации виполняеться callback-функция которая принимет или передает (наверное сначала принимает а потом передает)
    параметр element;

20. element - ето тaже li которая передаеться в liElements. (сейчас обьясню почему я так думаю)

21. forEach - ето функция которая интрапретирует роботу цикла (функция работает как цикл с количеством итераций которое
    равно количеству li в liElements; (количестви итераций етого цикла = всем li в liElements))

    как я думаю как работает етот цикл:

     - все вместе ето цикл:

     Array.forEach(liElements, function(element){
        element.addEventListener("mouseover", function(e) {
            e.target.className = "active";
        });

    - в первый параметр liElements функции forEach передаеться первая li - выполняеться function(element);

    - element - ето та же li которая передаеться в liElements, но потом как-бы проходит проверку когда выполняеться
      callback-функция то-есть function(element);

    как делаеться проверка:

    - к element используем метод addEventListener;

    - addEventListener ето тоже функция, и она принимает 2параметра - ивент mouseover и function(e);

    - на ивент mouseover повешен addEventListener;

    - итак, в первый параметр liElements функции forEach передаеться первая li - выполняеться function(element) с той же li
        которую передали в liElements;

    как выполняеться

    function(element){
        element.addEventListener("mouseover", function(e){
        });
    });

    - для element с li которая передалась в function(element){}; использован метод addventListener который слушает когда
        будет выполнен ивент mouseover

     - если для li которая сейчас в element, addEventListener с ивентом mouseover  не выполняеться значит мышки на етой li
        нет, а значит function(e) не выполняеться, а ето значит что итерация с етой li завершена и цикл переходит к итерации
        со следующей li;

   - а если же для li которая сейчас в element, addEventListener с ивентом mouseover выполняеться, а ето значит что мышка
        находиться на етой li, выполняеться function(element){}; тоесть итерация с етой li продолжаеться;

    - выполняеться callback-функция function(e) с параметром e;

    - параметр e - ето тот же самый element с li с которым сработали addEventListener  и mouseover;

    - что делает function(e)?

        - function(e) опьять же как бы передает свой же параметр e, и по заданому методу e.target.className динамично додает
   в html для етой li которая сейчас в есть в e.target клас active, который определен в css, а значит стиль для етой li
         меняеться

  #header-menu .active {
    height: 20px;
}

         ведь клас active тепер динамично добавлен в HTML.

//document.getElementById("some_element").className += "css_class2";

//function a(p1, p2){
//    p2()
//}
//
//a (6, function(){})















































